import { createApp, useReactive } from "../core";
function App() {
  const state = useReactive({
    count: 0,
    name: "WuYuCun",
  });

  const add = (num) => {
    state.count += num;
  };
  const minus = (num) => {
    state.count -= num;
  };
  const changeName = (val) => {
    state.name = val;
  };
  return {
    template: `
      <h1>{{count}}</h1>
      <h2>{{name}}</h2>
      <button onClick="add(2)">+</button>
      <button onClick="minus(1)">-</button>
      <button onClick="changeName('YangYang')">change Name</button>
    `,
    state,
    methods: {
      add,
      minus,
      changeName,
    },
  };
}

createApp(App(), document.querySelector("#app"));
